﻿@{
    Layout = "~/Views/Shared/_Form.cshtml";
}
@using Raffles.OA.Utility
<link href="~/Content/plugin/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Content/plugin/jquery-ui/jquery-ui.min.js"></script>

<link href="~/Content/plugin/jquery.smartwizard/css/smart_wizard.min.css" rel="stylesheet" />
<script src="~/Content/plugin/jquery.smartwizard/js/jquery.smartWizard.js"></script>

<link href="~/Content/plugin/highlight/css/vs.min.css" rel="stylesheet" />
<script src="~/Content/plugin/jquery-ui/highlight.pack.min.js"></script>
<style>
    .div-step {
        overflow: hidden;
    }

    .div-step-container {
        height: 350px;
        overflow-y: auto
    }

    .droppable-active {
        background-color: #ffe !important
    }

    .tools a {
        cursor: pointer;
        font-size: 80%;
        margin-right: 6px;
    }

    .draggable {
        cursor: move
    }
</style>
<div style="padding:0 10px;">
    <div id="smartwizard">
        <ul>
            <li><a href="#step-1">1<br />基本配置</a></li>
            <li><a href="#step-2">2<br />代码预览</a></li>
            <li><a href="#step-3">3<br />生成完毕</a></li>
        </ul>
        <div>
            <div id="step-1" class="div-step">
                <div class="div-step-container">
                    <div class="panel panel-default" style="margin-bottom:5px">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                文件名配置
                            </h3>
                        </div>
                        <div class="panel-body">
                            <form id="fileConfigForm" class="form-horizontal m">
                                <div class="form-group">
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label ">命名空间<span class="text-red"> *</span></label>
                                        <div class="col-sm-8">
                                            <input id="nameSpace" name="nameSpace" col="NameSpace" type="text" class="form-control required" />
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label ">代码描述<span class="text-red"> *</span></label>
                                        <div class="col-sm-8">
                                            <input id="classDescription" name="classDescription" col="ClassDescription" type="text" class="form-control required" />
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label ">类名前缀<span class="text-red"> *</span></label>
                                        <div class="col-sm-8">
                                            <input id="classPrefix" name="classPrefix" col="ClassPrefix" type="text" class="form-control required" />
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label ">区域名称<span class="text-red"> *</span></label>
                                        <div class="col-sm-8">
                                            <input id="areaName" name="areaName" col="AreaName" type="text" class="form-control required" />
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label ">实体类名<span class="text-red"> *</span></label>
                                        <div class="col-sm-8">
                                            <input id="entityName" col="EntityName" type="text" data-suffix="Entity" readonly="readonly" class="form-control" />
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label ">控制器名<span class="text-red"> *</span></label>
                                        <div class="col-sm-8">
                                            <input id="controllerName" col="ControllerName" type="text" data-suffix="Controller" value="Controller" readonly="readonly" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label ">列表页名<span class="text-red"> *</span></label>
                                        <div class="col-sm-8">
                                            <input id="pageIndexName" col="PageIndexName" type="text" value="Index" readonly="readonly" class="form-control" />
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label ">表单页名<span class="text-red"> *</span></label>
                                        <div class="col-sm-8">
                                            <input id="pageFormName" col="PageFormName" type="text" value="Form" readonly="readonly" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label ">表单列数<span class="text-red"> *</span></label>
                                        <div class="col-sm-8">
                                            <select class="form-control" id="showMode">
                                                <option value="1">显示1列</option>
                                                <option value="2">显示2列</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label ">创建日期</label>
                                        <div class="col-sm-8">
                                            <input id="createDate" col="CreateDate" type="text" class="form-control" value="@DateTime.Now.ToDateTimeString()" readonly />
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div id="step-2" class="div-step">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#codeEntity" data-toggle="tab">实体类</a></li>
                    <li><a href="#codeParam" data-toggle="tab">参数类</a></li>
                    <li><a href="#codeController" data-toggle="tab">控制器</a></li>
                    <li><a href="#codeIndex" data-toggle="tab">列表页</a></li>
                    <li><a href="#codeForm" data-toggle="tab">表单页</a></li>
                    <li><a href="#codeMenu" data-toggle="tab">菜单</a></li>
                </ul>
                <div class="div-step-container" style="height:310px;overflow-y: auto">
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="codeEntity" col="CodeEntity"> </div>
                        <div class="tab-pane fade" id="codeParam" col="CodeParam"></div>
                        <div class="tab-pane fade" id="codeController" col="CodeController"></div>
                        <div class="tab-pane fade" id="codeIndex" col="CodeIndex"></div>
                        <div class="tab-pane fade" id="codeForm" col="CodeForm"></div>
                        <div class="tab-pane fade" id="codeMenu" col="CodeMenu"></div>
                    </div>
                </div>
            </div>
            <div id="step-3" class="div-step">
                <div class="div-step-container">
                    <h5>输出文件位置：</h5>
                    <form id="outputListForm" class="form-horizontal m"></form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var tableName = frame.request("tableName");
    var codeList; //预览的代码
    $(function () {
        classPrefixChange()

        $("#smartwizard").on("leaveStep", function (e, anchorObject, stepNumber, stepDirection) {
            switch (stepNumber + 1) {
                case 1:
                    if (!$("#fileConfigForm").validate().form()) {
                        return false;
                    }
                    else {
                        codePreview();
                    }
                    break;
                case 2:
                    codeGenerate();
                    break;
            }
            return true;
        });
        $('#smartwizard').smartWizard({
            selected: 0,
            theme: 'arrows',
            transitionEffect: 'fade',
            toolbarSettings: {
                toolbarPosition: 'bottom',
                toolbarExtraButtons: [{ label: '关闭', css: 'btn-info', onClick: function () { frame.closeDialog(); } }]
            }
        });
    });
    function classPrefixChange() {
        $("#classPrefix").keyup(function () {
            var classPrefix = $(this).val();
            $("#fileConfigForm input").each(function (i, ele) {
                var suffix = $(ele).attr("data-suffix");
                if (!frame.isNullOrEmpty(suffix)) {
                    if (suffix == "Entity") {
                        $(ele).val(classPrefix);
                    }
                    else {
                        $(ele).val(classPrefix + $(ele).attr("data-suffix"));
                    }
                }
            });
        });
    }
    function codePreview() {
        var postData = {};
        postData.TableName = tableName;
        postData.FileConfig = $("#fileConfigForm").getWebControls();
        postData.FileConfig.ShowMode = $('#showMode option:selected').val();
        frame.ajax({
            url: '@Url.Content("/Manage/Generator/CodePreviewJson")',
            type: "post",
            async: false,
            data: postData,
            success: function (obj) {
                if (obj.success) {
                    var result = obj.data;
                    $("div.tab-pane").each(function (i, ele) {
                        var col = $(ele).attr("col");
                        if (col == "CodeMenu") {
                               $(this).html("<pre class='no-padding no-margin no-top-border'><code class='html'>" + result[col] + "</code></pre>");
                        }
                        else {
                            $(this).html("<pre class='no-padding no-margin no-top-border'><code class='csharp'>" + result[col] + "</code></pre>");
                        }
                    });
                    $('pre code').each(function (i, ele) {
                        hljs.highlightBlock(ele)
                    });
                    codeList = result;
                }
                else {
                    frame.msgError(obj.message);
                }
            }
        });
    }
    function codeGenerate() {
        var postData = {};
        postData.TableName = tableName;
        postData.FileConfig = $("#fileConfigForm").getWebControls();
        postData.Code = encodeURIComponent(JSON.stringify(codeList));
        frame.ajax({
            url: '@Url.Content("/Manage/Generator/CodeGenerateJson")',
            type: "post",
            async: false,
            data: postData,
            success: function (obj) {
                $("#outputListForm").find("div").remove();
                if (obj.success) {
                    for (var i = 0; i < obj.data.length; i++) {
                        var html = "<div class='form-group'><label class='col-sm-2 control-label'>" + obj.data[i].Key + "</label>" +
                            "<label class='col-sm-10 control-label' style='text-align:left'>" + obj.data[i].Value + "</label></div>";
                        $("#outputListForm").append(html);
                    }
                }
                else {
                    frame.msgError(obj.message);
                }
            }
        });
    }
</script>